import { PageContainer } from '@ant-design/pro-components';
import {Button, Card, Image} from 'antd';
import React, {useState, useEffect, useCallback} from 'react';
import {getAllBooks, getBookById, getLibraryById, searchBook} from "@/services/ant-design-pro/api";
import { history } from '@umijs/max'
import './BookLandingPage.less'

interface IProps {
  userData: API.UserInfoProps;
}

const BookLandingPage: React.FC<IProps> = ({userData}) => {
  const [bookList, setBookList] = useState<API.BookInfo>({})
  const getBookList = async () => {
    try {
      const res = await searchBook("风味人间");
      if (res.data) {
        setBookList(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getBookList().then();
  }, []);
  const clickForDetail = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])


  return(
    <PageContainer title={"个人图书馆"}>
      {bookList.data &&
        bookList.data.map((book, index)=>(
          <Card key={index}>
            <Image src={book.picture} style={{float: "left", height: "200px",}}/>
            <div style={{float: "right", width: "75%"}}>
              <div className={"infoBox"} style={{float: "left"}}>
                <b>{book.name}</b> <br/>
                <text className={"sort"}>分类：{book.sort}</text>
                <p className={"score"}> 智库评分：{book.score}</p>
                <p>作者：{book.author}</p>
                <p>藏书地点：{book.location}</p>
                <p>现有余量：{book.num}</p>
              </div>
              <div className={"buttonBox"} style={{float: "right", marginTop: "20px"}}>
                <Button type={"primary"} className={"myButton"} onClick={() => clickForDetail(book.id)}>编辑</Button> <br/>
                <Button type={"primary"} className={"myButton"} onClick={() => clickForDetail(book.id)} ghost>移除</Button>
              </div>
            </div>
          </Card>
        ))
      }
    </PageContainer>
  )
};
export default BookLandingPage;
